<script setup>
    import { useRouter } from 'vue-router';
    import { useCartStore } from '@/stores/cartStore';
    import {storeToRefs} from 'pinia'
    import { ElMessage } from 'element-plus';
    const {delCart, goodcheck, allcheck} = useCartStore()
    const {cartList, isAll, selectedCount, selectedPrice, totalCount, checkoutCount} = storeToRefs(useCartStore())
    // console.log(checkoutCount);
    // 单选
    function change(event, skuId) {
        // console.log(event, skuId);
        goodcheck(event, skuId)
    }

    // 点击全选按钮，单选跟随变化
    function allcheck2(selected) {
        // console.log(selected);
        allcheck(selected)
    }

    // 跳转结算页，如果没有选中商品，则会阻止跳转
    const router = useRouter()
    function checkoutClick() {
        
        if (checkoutCount.value.length === 0) {
            ElMessage({
                type: 'error',
                message: '请选择商品结算'
            })
            return
        }
        router.push('/checkout')
    }

</script>


<template>
    <div class="cart-page">
      <div class="container">
          <div class="cart">
              <table>
                  <thead>
                      <tr>
                          <th width="120">
                              <el-checkbox :model-value="isAll" @update:model-value="allcheck2"></el-checkbox>
                          </th>
                          <th width="400">商品信息</th>
                          <th width="220">单价</th>
                          <th width="180">数量</th>
                          <th width="180">小计</th>
                          <th width="140">操作</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr v-for="item in cartList" :key="item.skuId">
                          <td>
                              <el-checkbox :model-value="item.selected" @update:model-value="change($event, item.skuId)"></el-checkbox>
                          </td>
                          <td>
                              <div class="goods">
                                  <a href="javascript:;"><img :src="item.picture" alt=""></a>
                                  <p class="name ellipsis">{{item.name}}</p>
                              </div>
                          </td>
                          <td class="tc">
                              <span>{{item.price}}</span>
                          </td>
                          <td class="tc">
                              <el-input-number v-model="item.count" :min="1"></el-input-number>
                          </td>
                          <td class="tc">
                              <span class="red">¥{{(item.price * item.count).toFixed(2)}}</span>
                          </td>
                          <td class="tc">
                              <el-popconfirm title="确认删除吗？" confirm-button-text="确认"
                               cancel-button-text="取消" @confirm="delCart(item.skuId)">
                                  <template #reference>
                                      <a href="javascript:;">删除</a>
                                  </template>
                              </el-popconfirm>
                              
                          </td>
                      </tr>
                      <tr v-if="cartList.length === 0">
                          <td colspan="6">
                              <div class="cart-none">
                                  <el-empty description="购物车列表为空">
                                      <el-button type="primary" @click="$router.push('/')">
                                          随便逛逛
                                      </el-button>
                                  </el-empty>
                              </div>
                          </td>
                      </tr>
                  </tbody>
              </table>
          </div>
          <!-- 操作 -->
          <div class="manipulate">
              <div class="batch">
                  共 {{ totalCount }} 件商品，已选择 {{selectedCount}} 件，商品合计：
                  <span>¥ {{selectedPrice.toFixed(2)}}</span> 
              </div>
              <div class="total">
                  <el-button  type="primary" size="large" @click="checkoutClick">下单结算</el-button>
              </div>
          </div>
      </div>
    </div>
  </template>
  
  
  <style scoped lang='scss'>
      .cart-page{
          margin-top: 20px;
          .cart{
              color: #666;
              background: #fff;
              table{
                  th,td{
                      padding: 10px;
                      border-bottom: 1px solid #f5f5f5;
                      &:first-child{
                          text-align: left;
                          padding-left: 30px;
                      }
                      .cart-none{
                          padding: 90px 0;
                      }
                  }
                  th{
                      font-weight: normal;
                      font-size: 16px;
                      line-height: 50px;
                  }
                  .tc{
                      text-align: center;
                      .red{
                          color: $priceColor;
                          font-size: 16px;
                      }
                      a{
                          color: $xtxColor;
                      }
                  }
                  .goods{
                      display: flex;
                      align-items: center;
                      .name{
                          font-size: 16px;
                          padding-left: 10px;
                      }
                      img{
                          width: 100px;
                          height: 100px;
                      }
                  }
              }
          }
          .manipulate{
              display: flex;
              height: 80px;
              align-items: center;
              padding: 0 30px;
              justify-content: space-between;
              background: #fff;
              margin-top: 20px;
              font-size: 16px;
              .batch{
                  span{
                      font-size: 18px;
                      font-weight: bold;
                      color: $priceColor;
                  }
              }
          }
      }
  </style>